<template>
	<div class="main">
		<div class="head">
			我的
		</div>
		<div class="card">
			<div class="title" @click="gologin">
				<div class="headpic">
					<img class="img" src="../../assets/user.png" mode="">
				</div>
				<div class="user">
					{{nikeName}}
				</div>
			</div>
			<div class="line">
			</div>
			<div class="content">
				<div class="item" style="border-right:2px solid #ccc;" @click="govip">
					<img src="../../assets/img/chongzhi.png" mode="">
					<div class="text">
						会员充值
					</div>
				</div>
				<div class="item" @click="gocards">
					<img src="../../assets/img/kaquanbao.png" mode="">
					<div class="text">
						红包卡券
					</div>
				</div>
			</div>
		</div>
		<div class="card card-bottom">
			<div class="bottom-item" @click="goaddress">
				<img src="../../assets/img/dizhi.png" alt="">
				<span>我的地址</span>
			</div>
			<div class="bottom-item" @click="goquestion"><img src="../../assets/img/wenti.png" alt="">
				<span>常见问题</span>
			</div>
			<div class="bottom-item"><img src="../../assets/img/xieyi.png" alt="">
				<span>用户协议</span>
			</div>
			<div class="bottom-item" @click="goaboutUs">
				<img src="../../assets/img/guanyu.png" alt="">
				<span>关于我们</span>
			</div>
			<div class="bottom-item"><img src="../../assets/img/kefu.png" alt="">
				<span>联系店长</span>
			</div>
			<div class="bottom-item"><img src="../../assets/img/suoding.png" alt="">
				<span>修改密码</span>
			</div>
		</div>
	</div>
</template>
<script lang="ts" setup>
import { onMounted, ref ,watch} from 'vue'
import { useRouter } from 'vue-router'
import { useStore } from 'vuex'
import { Token } from '../../utils/request'
const $router = useRouter()
const store = useStore()
const nikeName = ref('')



// 监听Vuex store中的user变化
watch(
  () => store.state.user,
  (newUser) => {
    if (newUser && newUser.nikeName) {
      nikeName.value = newUser.nikeName
    }
  },
  { immediate: true }
)
const getName = () => {
	nikeName.value = store.state.user.nikeName
	console.log(nikeName.value)
}
const gologin = () => {
	let token = localStorage.getItem('token')
	if (!token) {
		$router.push('/login')
	} else {
		alert('已登录')
	}
}
const govip = () => $router.push('/vip')
const gocards = () => $router.push('/cards')
const goaddress = () => $router.push('/address')
const goquestion = () => $router.push('/question')
const goaboutUs = () => $router.push('/aboutUs')

//个人信息接口
interface userItem {
	nikeName: any,
	user_img: any,
	userId: any,
}
const userInfo = ref<userItem[]>([])
const getUserInfo = () => {
	Token('/api/info', 'get', {}).then((res: any) => {
		userInfo.value = res.data
	})
}

onMounted(()=>{
	getUserInfo()
	getName()
})

</script>
<style lang="less" scoped>
.main {
	position: relative;
	height: 92vh;

	.head {
		padding: 20px 0;
		background-color: #00A299;
		height: 200px;
		text-align: center;
		color: white;
		font-size: 50px;
	}

	.card {
		background-color: white;
		position: absolute;
		top: 110px;
		left: 50px;
		right: 50px;
		border-radius: 20px;
		box-shadow: 0 0 10px #ccc;

		.title {
			width: 90%;
			margin: 0 auto;
			padding: 25px 0 30px 0;
			display: flex;
			justify-content: start;
			align-items: center;

			.headpic {
				background-color: #7FD0CC;
				height: 120px;
				width: 120px;
				border-radius: 50%;
				position: relative;

				.img {
					height: 90px;
					width: 90px;
					position: absolute;
					top: 50%;
					left: 50%;
					transform: translate(-50%, -50%);
				}
			}

			.user {
				font-size: 40px;
				margin-left: 40px;
			}
		}

		.line {
			border-bottom: 2px solid #ccc;
			width: 100%;
		}

		.content {
			margin: 10px 0;
			display: flex;
			flex-direction: row;
			justify-content: space-between;

			.item {
				width: 50%;
				text-align: center;
				padding: 20px 0;
				font-size: 30px;
				display: flex;
				flex-direction: column;
				align-items: center;

				img {
					width: 80px;
					height: 80px;
				}
			}
		}
	}

	.card-bottom {
		position: absolute;
		top: 490px;
		left: 50px;
		right: 50px;
		height: 610px;

		.bottom-item {
			height: 100px;
			line-height: 100px;
			font-size: 30px;
			border-bottom: 2px solid #ccc;
			padding-left: 40px;

			&:last-child {
				border-bottom: none;
			}

			img {
				width: 50px;
				height: 50px;
				vertical-align: middle;
				margin-right: 20px;
			}
		}
	}
}

.bottom-item::after {
	content: '';
	display: inline-block;
	width: 20px;
	height: 20px;
	border-left: 2px solid #ccc;
	border-top: 2px solid #ccc;
	transform: rotate(135deg);
	margin-left: 350px;
	vertical-align: middle;
}
</style>